<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>USERDETAIL</title>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" th:href="@{/LoginStyle/css/bootstrap.min.css}">

    <!-- Customizable CSS -->
    <link rel="stylesheet" href="assets/css/main.css" th:href="@{/indexStyle/css/main.css}">
    <link rel="stylesheet" href="assets/css/blue.css" th:href="@{/indexStyle/css/blue.css}">
    <link rel="stylesheet" href="assets/css/owl.carousel.css" th:href="@{/indexStyle/css/owl.carousel.css}">
    <link rel="stylesheet" href="assets/css/owl.transitions.css" th:href="@{/indexStyle/css/owl.transitions.css}">
    <link rel="stylesheet" href="assets/css/animate.min.css" th:href="@{/indexStyle/css/animate.min.css}">
    <link rel="stylesheet" href="assets/css/rateit.css" th:href="@{/indexStyle/css/rateit.css}">
    <link rel="stylesheet" href="assets/css/bootstrap-select.min.css"
          th:href="@{/indexStyle/css/bootstrap-select.min.css}">
    <link rel="stylesheet" href="button.css" th:href="@{/indexStyle/css/button.css}">

    <!-- Icons/Glyphs -->
    <link rel="stylesheet" href="assets/css/font-awesome.css" th:href="@{/indexStyle/css/font-awesome.css}">
    <style>
        .center {
            line-height: 120px;
            text-align: center;
        }

        .r-boder {
            border-right: 1px solid #BBBBBB;
        }

        .top {
            height: 35px;
            background-color: skyblue;
            line-height: 35px;
            text-align: center;
        }

        .body-info {
            height: 150px;
            margin-top: 20px;
            background-color: #fff;
        }

        .body-top {
            height: 30px;
            line-height: 30px;
            background-color: #E8E8E8;
        }

        .body-top label {
            margin-left: 10px;
        }

        .body-top span {
            margin: 0 10px;
        }

        .body-top a {
            margin-left: 20px;
        }

        .body-box {
            height: 120px;
        }

        .body-box li {
            height: 120px;
        }

        .body-box img {
            float: right;
            height: 100px;
            width: 100px;
        }

        .imge {
            padding-top: 10px;
        }

        .pro-name {
            padding: 15px 0;
            font-size: 14px;
            overflow: hidden;
        }

        .sale-name {
            padding: 15px 0;
            overflow: hidden;
        }

        .button {
            margin-top: 45px;
        }

        .footer {
            height: 50px;
            margin-top: 20px;
            background-color: skyblue;
        }

        .footer nav {
            float: right;
            margin-right: 10px;
            /* margin-bottom: 5px!important; */
        }

        .pagination {
            margin: 9px 0;
        }
    </style>
</head>

<body class="cnt-home">
<header th:replace="~{user/fragment/IndexHeader:: indexHeader}"></header>
<div class="body-content outer-top-xs">
    <div class='container'>
        <div class='row'>
            <div class='col-xs-12 col-sm-12 col-md-3 sidebar'>
                <!-- ================================== TOP NAVIGATION ================================== -->
                <div class="side-menu animate-dropdown outer-bottom-xs">
                    <div class="head"><i class="icon fa fa-align-justify fa-fw"></i> 账户管理</div>
                    <nav class="yamm megamenu-horizontal">
                        <ul class="nav">
                            <li>
                                <a href="userdetail.html" class="dropdown-toggle " th:href="@{/User/userdetail}">
                                    <i class="icon fa fa-shopping-bag" aria-hidden="true"></i>个人信息</a>
                            </li>
                            <li>
                                <a href="useraddress.html" class="dropdown-toggle " th:href="@{/User/useraddress}">
                                    <i class="icon fa fa-shopping-bag" aria-hidden="true"></i>收货地址</a>
                            </li>
                            <li>
                                <a href="userwishlist.html" class="dropdown-toggle" th:href="@{/User/userwishlist}">
                                    <i class="icon fa fa-shopping-bag" aria-hidden="true"></i>收藏</a>
                            </li>
                            <li>
                                <a href="usercart.html" class="dropdown-toggle" th:href="@{/User/usercart}">
                                    <i class="icon fa fa-shopping-bag" aria-hidden="true"></i>购物车</a>
                            </li>
                            <li>
                                <a href="changepwd.html" class="dropdown-toggle " th:href="@{/User/changepwd}">
                                    <i class="icon fa fa-shopping-bag" aria-hidden="true"></i>更改密码</a>
                            </li>
                            <li>
                                <a href="userorder.html" class="dropdown-toggle active" th:href="@{/User/userorder}">
                                    <i class="icon fa fa-shopping-bag" aria-hidden="true"></i>订单</a>
                            </li>
                        </ul>
                        <!-- /.nav -->
                    </nav>
                    <!-- /.megamenu-horizontal -->
                </div>
                <!-- /.side-menu -->
            </div>
            <div class="col-xs-12 col-sm-12 col-md-9">
                <div class="top">
                    <ul>
                        <li class="col-md-5">商品</li>
                        <li class="col-md-1">数量</li>
                        <li class="col-md-2">实付款</li>
                        <li class="col-md-1">售后</li>
                        <li class="col-md-1">状态</li>
                        <li class="col-md-2">收货</li>
                    </ul>
                </div>
                <div class="body-info" th:each="order:${orderList}">
                    <div class="body-top">
                        <label>订单号:<span th:text="${order.orderId}">1564984664</span></label>
                        <label>创建时间:<span th:text="${order.createTime}">2020年3月3日 15点56分</span></label>
                        <a href="#">有问题?</a>
                    </div>
                    <div class="body-box">
                        <ul>
                            <li class="col-md-5 r-boder">
                                <div class="col-md-4 imge"><img src="assets\images\products\p1.jpg" th:src="@{${order.goodsPicture}}" alt=""></div>
                                <div class="col-md-8">
                                    <div class="pro-name" th:text="${order.goodsName}">java基础</div>
                                    <div class="sale-name">商家:<a th:text="${order.storeName}">xxxxx商家</a></div>
                                </div>
                            </li>
                            <li class="col-md-1 center r-boder"><span>1</span></li>
                            <li class="col-md-2 center r-boder">
                                <strong>￥</strong>
                                <span th:text="${order.price}">10086.00</span>
                            </li>
                            <li class="col-md-1 center r-boder"><a href="#">退款</a></li>
                            <li class="col-md-1 center r-boder">
                                <span th:text="${order.orderStatus}">已完成</span>
                            </li>
                            <li class="col-md-2 center">
                                <div class="button">
                                    <a href="#">确认收货</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="footer">
                    <nav aria-label="Page navigation">
                        <div class="pagination-container">
                            <ul class="pagination" id="pagination1"></ul>
                            <!-- /.list-inline -->
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script src="assets/js/jquery-1.11.1.min.js" th:src="@{/LoginStyle/js/jquery.min.js}"></script>
<script src="assets/js/bootstrap.min.js" th:src="@{/LoginStyle/js/bootstrap.min.js}"></script>
<script src="assets/js/bootstrap-hover-dropdown.min.js"
        th:src="@{/indexStyle/js/bootstrap-hover-dropdown.min.js}"></script>
<script src="assets/js/owl.carousel.min.js" th:src="@{/indexStyle/js/owl.carousel.min.js}"></script>
<script src="assets/js/echo.min.js" th:src="@{/indexStyle/js/echo.min.js}"></script>
<script src="assets/js/jquery.easing-1.3.min.js" th:src="@{/indexStyle/js/jquery.easing-1.3.min.js}"></script>
<script src="assets/js/bootstrap-slider.min.js" th:src="@{/indexStyle/js/bootstrap-slider.min.js}"></script>
<script src="assets/js/jquery.rateit.min.js" th:src="@{/indexStyle/js/jquery.rateit.min.js}"></script>
<script src="assets/js/lightbox.min.js" th:src="@{/indexStyle/js/lightbox.min.js}"></script>
<script src="assets/js/bootstrap-select.min.js" th:src="@{/indexStyle/js/bootstrap-select.min.js}"></script>
<script src="assets/js/wow.min.js" th:src="@{/indexStyle/js/wow.min.js}"></script>
<script src="assets/js/scripts.js" th:src="@{/indexStyle/js/scripts.js}"></script>
<script src="/js/jqPaginator.js" th:src="@{/indexStyle/js/jqPaginator.js}"></script>
<script th:src="@{/indexStyle/js/indexHeader.js}"></script>
<script>
    $.jqPaginator('#pagination1', {
        totalPages: [[${pages}]],
        visiblePages: 5,
        currentPage: [[${nowPage}]],
        first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
        prev: '<li class="prev"><a href="javascript:;">前一页</a></li>',
        next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
        last: '<li class="last"><a href="javascript:void(0);">尾页</a></li>',
        page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
        onPageChange: function (num, type) {
            if (type == "change") {
                window.location.href = "/User/userorder?index=" + num;
            }
        }
    });
</script>
</body>

</html>